<template>
	<view class="mons">
		<view class="top">
			<view class="head" @click='upload'>
				<image :src="user.cPortrait||'../../static/img/3/3-105.png'" mode="aspectFill"></image>
			</view>
			<view class="name">
				点击修改头像
			</view>
		</view>
		<view class="list" v-if='user != null'>
			<view class="li">
				<view class="left">
					会员名称：
				</view>
				<view class="text">
					{{user.cUserName}}
				</view>

			</view>
			<view class="li">
				<view class="left">
					手机号码：
				</view>
				<view class="text">
					{{user.cPhone}}
				</view>
				<view class="rig">
					<navigator url="/pages/user/userPhone">修改</navigator>
					<!-- <image src="../../static/img/3/3-99.png" mode="widthFix"></image> -->
				</view>
			</view>
			<!-- <view class="li">
				<view class="left">
					性别：
				</view>
				<picker class="text" @change="bindPickerChange" :value="index" :range="array">
					<view class="uni-input">{{array[index]}}</view>
				</picker>
				<view class="rig">
					<image src="../../static/img/3/3-99.png" mode="widthFix"></image>
				</view>
			</view> -->
			<view class="li">
				<view class="left">
					生日：
				</view>
				<picker style="height: 45rpx;" mode="date" class="text" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="uni-input">{{date}}</view>
				</picker>
				<view class="rig">
					<image src="../../static/img/3/3-99.png" mode="widthFix"></image>
				</view>
			</view>
			<!-- 	<view class="li">
				<view class="left">
					城市：
				</view>
				<input type="text" class="text" :value="pickerText" disabled placeholder="选择城市" />

				<view class="rig">
					<image src="../../static/img/3/3-99.png" mode="widthFix"></image>
				</view>
			</view> -->

			<view class="li">
				<view class="left">
					QQ：
				</view>
				<input type="number" class="text" v-model="qq" placeholder="填写QQ">

			</view>
			<view class="li">
				<view class="left">
					邮箱：
				</view>
				<input v-model="email" type="text" class="text" placeholder="填写邮箱">

			</view>

		</view>
		<!-- <view class="box">
			<view class="h1">
				喜欢的分类
			</view>
			<view class="tabbox">
				<view class="tab">
					水果
				</view>
				<view class="tab">
					水果
				</view>
				<view class="tab">
					水果
				</view>
				<view class="tab">
					电子产品
				</view>
				<view class="tab">
					水果
				</view>
			</view>
		</view> -->
		<mpvue-picker :themeColor="themeColor" ref="mpvuePicker" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
		 @onConfirm="onConfirm" @="" :pickerValueArray="pickerValueArray"></mpvue-picker>
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault" @=""
		 @onConfirm="onConfirm"></mpvue-city-picker>
	</view>
</template>

<script>
	// https://github.com/zhetengbiji/mpvue-picker
	import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue';
	// https://github.com/zhetengbiji/mpvue-citypicker
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
	import cityData from '@/common/city.data.js';
	export default {

		name: "",
		components: {
			mpvuePicker,
			mpvueCityPicker
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				array: ['男', '女'],
				index: 0,
				date: currentDate,
				mulLinkageTwoPicker: cityData,
				cityPickerValueDefault: [0, 0, 1],
				themeColor: '#007AFF',
				pickerText: '',
				mode: '',
				deepLength: 1,
				pickerValueDefault: [0],
				pickerValueArray: [],
				name: '',
				user: {
					cPortrait: ''
				},
				qq: '',
				email: '',
				base: ''
			}
		},

		onLoad() {



			this.getInfo()



		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			getInfo() {
				var that = this;
				that.$Request.post(
					that.$api.httpApi.user.userinfo + '&token=' + that.$SysCache.get('token'),
				).then(res => {
					if (res.code == 200) {
						that.user = res.data
						that.date = res.data.dBirthday;
						that.qq = res.data.cQQ;
						if (res.data.cDefine1) {
							that.index = res.data.cDefine1;
						} else {
							that.index = 0;
						}


						that.email = res.data.cEmail;
					}
				})
			},
			// 三级联动选择
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show()
			},
			onConfirm(e) {
				this.pickerText = e.label
			},
			bindPickerChange: function(e) {
				this.index = e.target.value
			},
			bindDateChange: function(e) {
				this.date = e.target.value;
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			dataURLtoBlob(dataurl) {
				var arr = dataurl.split(','),
					mime = arr[0].match(/:(.*?);/)[1],
					bstr = atob(arr[1]),
					n = bstr.length,
					u8arr = new Uint8Array(n);
				while (n--) {
					u8arr[n] = bstr.charCodeAt(n);
				}
				return new Blob([u8arr], {
					type: mime
				});
			},

			upload() {
				var that = this;
				var date = Date.parse(new Date()) / 1000
				// uploadheadimg
				uni.chooseImage({
					count: 1,
					sizeType: "original",
					success(res) {

						var file = res.tempFilePaths[0];



						// console.log(tg);
						var datas = {
							"random": date
						}
						uni.showLoading({
							title: "正在上传"
						})
						
								uni.uploadFile({
									// 需要上传的地址*/
									url: 'https://mallmgt.inja.com/api/score/uApi/type/uploadheadimg?token=' + that.$SysCache.get(
										'token') + '&random=' + date + '&uid=' + that.user.id,
									// filePath  需要上传的文件
									filePath: file,
									name: 'upfile',
									// data: {},
									// formData: {
									// 	'uid': that.user.id,
									// 	'random': date,
									// 	'sign': ress.data.data
									// },
									header: {
										// "content-type": 'application/x-www-form-urlencoded',
										"token": that.$SysCache.get('token')
									},
									success(res1) {
										// 显示上传信息
										uni.hideLoading()
										res1 = JSON.parse(res1.data)
										that.user.cPortrait = res1.data.url

									}
								})

							





					






					}
				})
			}
		},
		onBackPress() {
			if (this.$refs.mpvuePicker.showPicker) {
				this.$refs.mpvuePicker.pickerCancel();
				return true;
			}
			if (this.$refs.mpvueCityPicker.showPicker) {
				this.$refs.mpvueCityPicker.pickerCancel();
				return true;
			}
		},
		onNavigationBarButtonTap: function(e) {
			var that = this;


			that.$Request.post(
				that.$api.httpApi.user.userinfo + '&token=' + that.$SysCache.get('token'),
			).then(resa => {
				if (resa.code == 200) {
					var datas = {
						birthday: that.date,
						qq: that.qq,
						mid: that.user.id,
						define1: that.index + '',
						define1: that.index + '',
						email: that.email,
						ts: resa.data.ts
					};


					this.$Request.post4(
						this.$api.httpApi.user.userSave, datas
					).then(res => {
						if (res.code == 1) {

							uni.showToast({
								title: '修改成功！',
								duration: 1500
							})
							this.getInfo()
						}

					})









					// uni.request({
					// 	url: 'http://47.107.92.235/wap-chat/PHP/public/index.php/index/index/index',
					// 	method: "POST",
					// 	data: datas,
					// 	success: function(res) {

					// 		if (res.data.code == 1) {
					// 			that.$Request.post4(
					// 				that.$api.httpApi.user.userchanges + '&token=' + that.$SysCache.get('token'),
					// 				datas, '', res.data.data

					// 			).then(ress => {
					// 				if (ress.flag == 1) {
					// 					uni.showToast({
					// 						title: '修改成功！',
					// 						duration: 1500
					// 					})

					// 				} else {
					// 					uni.showToast({
					// 						title: ress.errormsg,
					// 						duration: 1500
					// 					})

					// 				}

					// 			});
					// 		}

					// 	}
					// });
				}
			});




		},
	}
</script>

<style scoped>
	.tabbox {
		margin-top: 1px;
		background: #fff;
		padding-bottom: 30rpx;
		/* padding-top: 30rpx; */
	}

	.tabbox .tab {
		display: inline-block;
		padding-bottom: 15rpx;
		padding-top: 15rpx;
		padding-left: 25rpx;
		padding-right: 25rpx;
		border: 1px solid rgba(227, 227, 227, 1);
		border-radius: 27px;
		font-size: 22rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-top: 32rpx;

	}

	.box {
		margin-top: 4rpx;
	}

	.box .h1 {
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		background: #fff;
		padding: 30rpx;
	}

	.list .li {
		margin-bottom: 1px;
		background: #fff;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-bottom: 30rpx;
		padding-top: 30rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
	}

	.list .li .left {
		display: inline-block;
		width: 157rpx;
	}

	.list .li .text {
		display: inline-block;
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(183, 183, 183, 1);
	}

	.list .li input {
		vertical-align: middle;
		width: 490rpx;
	}

	.list .li picker {
		vertical-align: middle;
		width: 490rpx;
	}

	.list .li .rig {
		display: inline-block;
		float: right;
	}

	.list .li .rig navigator {
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(240, 64, 111, 1);
	}

	.list .li .rig image {
		display: inline-block;
		width: 16rpx;
		vertical-align: middle;
		margin-left: 19rpx;
	}

	.list .li .rig text {
		display: inline-block;
		vertical-align: middle;
	}

	uni-page-body {
		height: 100%;
	}

	.mons {
		min-height: 100%;
		background: #EEEEEE;
	}

	.top {
		background: #fff;
		background-size: 100% 100%;
		padding-top: 65rpx;
		padding-bottom: 65rpx;
		margin-bottom: 3rpx;
	}

	.head {
		width: 124rpx;
		height: 124rpx;
		display: block;
		background: rgba(255, 255, 255, 0.53);
		border: 1px solid rgba(255, 255, 255, 0.53);
		border-radius: 50%;
		margin: auto;
	}

	.head image {
		display: block;
		width: 102rpx;
		height: 102rpx;
		background: rgba(255, 255, 255, 1);
		border: 1px solid #E6E6E6;
		border-radius: 50%;
		margin: auto;
		margin-top: 10rpx;
	}

	.name {
		text-align: center;
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(68, 68, 68, 1);
		margin-top: 17rpx;
	}

	.list .li input::-webkit-input-placeholder {
		color: #B7B7B7;
	}

	.list .li input::-moz-placeholder {
		/* Mozilla Firefox 19+ */
		color: #B7B7B7;
	}

	.list .li input:-moz-placeholder {
		/* Mozilla Firefox 4 to 18 */
		color: #B7B7B7;
	}

	.list .li input:-ms-input-placeholder {
		/* Internet Explorer 10-11 */
		color: #B7B7B7;
	}

	.list .li input:-ms-input-placeholder {
		/* Internet Explorer 10-11 */
		color: #B7B7B7;
	}

	.list .li input::input-placeholder {
		color: #B7B7B7;
	}
</style>
